<template>
	<view class="container">
		<view class="prod-list">
			<block v-for="(item, scIndex) in shopCartItemDiscounts" :key="scIndex">
				<view class="prod-block">
					<view v-if="item.chooseDiscountItemDto" class="discount-tips">
						<text class="text-block">
							{{ wxs.parseDiscount(item.chooseDiscountItemDto.discountRule) }}
						</text>
						<text class="text-list">
							{{
                wxs.parseDiscountMsg(item.chooseDiscountItemDto.discountRule, item.chooseDiscountItemDto.needAmount, item.chooseDiscountItemDto.discount)
              }}
						</text>
					</view>
					<block v-for="(prod, index) in item.shopCartItems" :key="index">
						<view class="item">
							<view class="btn">
								<label>
									<checkbox :data-scindex="scIndex" :data-index="index" :value="prod.prodId"
										:checked="prod.checked" color="#105c3e" @tap="onSelectedItem" />
								</label>
							</view>
							<view class="prodinfo">
								<view class="pic">
									<image :src="prod.pic" />
								</view>
								<view class="opt">
									<view class="prod-name">
										{{ prod.prodName }}
									</view>
									<text :class="'prod-info-text ' + (prod.skuName?'':'empty-n')">
										{{ prod.skuName }}
									</text>
									<view class="price-count">
										<view class="price">
											<text class="symbol">
												￥
											</text>
											<text class="big-num">
												{{ wxs.parsePrice(prod.price)[0] }}
											</text>
											<text class="small-num">
												.{{ wxs.parsePrice(prod.price)[1] }}
											</text>
										</view>
										<view class="m-numSelector">
											<view class="minus" :data-scindex="scIndex" :data-index="index"
												@tap="onCountMinus" />
											<input type="number" :value="prod.prodCount" disabled>
											<view class="plus" :data-scindex="scIndex" :data-index="index"
												@tap="onCountPlus" />
										</view>
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
			</block>
		</view>
		<view v-if="!shopCartItemDiscounts.length" class="empty">
			<view class="img">
				<image src="@/static/images/tabbar/basket.png" />
			</view>
			<view class="txt">
				您还没有添加任何商品哦~
			</view>
		</view>

		<!-- 底部按钮 -->
		<view v-if="shopCartItemDiscounts.length>0" class="cart-footer">
			<view class="btn all">
				<checkbox :checked="allChecked" color="#f7d731;" @tap="onSelAll" />
				全选
			</view>
			<view class="btn del" @tap="onDelBasket">
				<text>删除</text>
			</view>
			<view class="btn total">
				<view class="finally">
					<text>合计:</text>
					<view class="price">
						<text class="symbol">
							￥
						</text>
						<text class="big-num">
							{{ wxs.parsePrice(finalMoney)[0] }}
						</text>
						<text class="small-num">
							.{{ wxs.parsePrice(finalMoney)[1] }}
						</text>
					</view>
				</view>
				<view v-if="subtractMoney>0" class="total-msg">
					总额:￥{{ wxs.toPrice(totalMoney) }} 立减:￥{{ wxs.toPrice(subtractMoney) }}
				</view>
			</view>
			<view class="btn settle" @tap="toFirmOrder">
				<text>结算</text>
			</view>
		</view>
		<!-- end 底部按钮 -->
	</view>
</template>
<script>
import number from "../../wxs/number";

  export default {
		data() {
			return {
        wxs: number(),
				shopCartItemDiscounts: [],
				allChecked: false,
				//最终的金额
				finalMoney: 0,
				//减去金额
				subtractMoney: 0,
				//总金额
				totalMoney: 0,
			}
		},
		methods: {
			/**
			 * 生命周期函数--监听页面显示
			 */
			onShow() {
				this.loadBasketData()
				http.getCartCount() // 重新计算购物车总数量
			},
			loadBasketData() {
				uni.showLoading() // 加载购物车
				http.request({
						url: '/p/shopCart/info',
						method: 'POST',
						data: {}
					})
					.then(({
						data
					}) => {
						if (data.length > 0) {
							// 默认不选中
							const shopCartItemDiscountsParam = data[0].shopCartItemDiscounts
							shopCartItemDiscountsParam.forEach(shopCartItemDiscount => {
								shopCartItemDiscount.shopCartItems.forEach(shopCartItem => {
									shopCartItem.checked = false
								})
							})
							this.shopCartItemDiscounts = shopCartItemDiscountsParam
							this.allChecked = false
						} else {
							this.shopCartItemDiscounts = []
						}
						calTotalPrice() // 计算总价
						uni.hideLoading()
					})
			},

			/**
			 * 去结算
			 */
			toFirmOrder() {
				const shopCartItemDiscountsParam = this.shopCartItemDiscounts
				const basketIds = []
				shopCartItemDiscountsParam.forEach(shopCartItemDiscount => {
					shopCartItemDiscount.shopCartItems.forEach(shopCartItem => {
						if (shopCartItem.checked) {
							basketIds.push(shopCartItem.basketId)
						}
					})
				})

				if (!basketIds.length) {
					uni.showToast({
						title: '请选择商品',
						icon: 'none'
					})
					return
				}
				uni.setStorageSync('basketIds', JSON.stringify(basketIds))
				uni.navigateTo({
					url: '/pages/submit-order/submit-order?orderEntry=0'
				})
			},

			/**
			 * 全选
			 */
			onSelAll() {
				const allCheckedParam = !this.allChecked // 改变状态
				const shopCartItemDiscountsParam = this.shopCartItemDiscounts
				for (let i = 0; i < shopCartItemDiscountsParam.length; i++) {
					const cItems = shopCartItemDiscountsParam[i].shopCartItems
					for (let j = 0; j < cItems.length; j++) {
						cItems[j].checked = allCheckedParam
					}
				}
				this.allChecked = allCheckedParam
				this.shopCartItemDiscounts = shopCartItemDiscountsParam
				calTotalPrice() // 计算总价
			},

			/**
			 * 每一项的选择事件
			 * +
			 */
			onSelectedItem(e) {
				const index = e.currentTarget.dataset.index // 获取data- 传进来的index
				const scindex = e.currentTarget.dataset.scindex
				const shopCartItemDiscountsParam = this.shopCartItemDiscounts // 获取购物车列表
				const checked = shopCartItemDiscountsParam[scindex].shopCartItems[index].checked // 获取当前商品的选中状态
				shopCartItemDiscountsParam[scindex].shopCartItems[index].checked = !checked // 改变状态
				this.shopCartItemDiscounts = shopCartItemDiscountsParam
				checkAllSelected() // 检查全选状态
				calTotalPrice() // 计算总价
			},

			/**
			 * 检查全选状态
			 */
			checkAllSelected() {
				let allCheckedParam = true
				const shopCartItemDiscountsParam = this.shopCartItemDiscounts
				let flag = false
				for (let i = 0; i < shopCartItemDiscountsParam.length; i++) {
					const cItems = shopCartItemDiscountsParam[i].shopCartItems
					for (let j = 0; j < cItems.length; j++) {
						if (!cItems[j].checked) {
							allCheckedParam = !allCheckedParam
							flag = true
							break
						}
					}
					if (flag) break
				}
				this.allChecked = allCheckedParam
			},
			/**
			 * 计算购物车总额
			 */
			calTotalPrice() {
				const shopCartItemDiscountsParam = this.shopCartItemDiscounts
				const shopCartIds = []
				for (let i = 0; i < shopCartItemDiscountsParam.length; i++) {
					const cItems = shopCartItemDiscountsParam[i].shopCartItems
					for (let j = 0; j < cItems.length; j++) {
						if (cItems[j].checked) {
							shopCartIds.push(cItems[j].basketId)
						}
					}
				}
				uni.showLoading()
				http.request({
						url: '/p/shopCart/totalPay',
						method: 'POST',
						data: shopCartIds
					})
					.then(({
						data
					}) => {
						this.finalMoney = data.finalMoney
						this.totalMoney = data.totalMoney
						this.subtractMoney = data.subtractMoney
						uni.hideLoading()
					})
			},

			/**
			 * 减少数量
			 */
			onCountMinus(e) {
				const index = e.currentTarget.dataset.index
				const scindex = e.currentTarget.dataset.scindex
				const shopCartItemDiscountsParam = this.shopCartItemDiscounts
				const prodCount = shopCartItemDiscountsParam[scindex].shopCartItems[index].prodCount
				if (prodCount > 1) {
					updateCount(shopCartItemDiscountsParam, scindex, index, -1)
				}
			},

			/**
			 * 增加数量
			 */
			onCountPlus(e) {
				const index = e.currentTarget.dataset.index
				const scindex = e.currentTarget.dataset.scindex
				const shopCartItemDiscountsParam = this.shopCartItemDiscounts
				updateCount(shopCartItemDiscountsParam, scindex, index, 1)
			},

			/**
			 * 改变购物车数量接口
			 */
			updateCount(shopCartItemDiscountsParam, scindex, index, prodCount) {
				uni.showLoading({
					mask: true
				})
				http.request({
						url: '/p/shopCart/changeItem',
						method: 'POST',
						data: {
							count: prodCount,
							prodId: shopCartItemDiscountsParam[scindex].shopCartItems[index].prodId,
							skuId: shopCartItemDiscountsParam[scindex].shopCartItems[index].skuId,
							shopId: 1
						}
					})
					.then(() => {
						shopCartItemDiscountsParam[scindex].shopCartItems[index].prodCount += prodCount
						this.shopCartItemDiscounts = shopCartItemDiscountsParam
						calTotalPrice() // 计算总价
						uni.hideLoading()
						http.getCartCount() // 重新计算购物车总数量
					})
			},

			/**
			 * 删除购物车商品
			 */
			onDelBasket() {
				const shopCartItemDiscountsParam = this.shopCartItemDiscounts
				const basketIds = []
				for (let i = 0; i < shopCartItemDiscountsParam.length; i++) {
					const cItems = shopCartItemDiscountsParam[i].shopCartItems
					for (let j = 0; j < cItems.length; j++) {
						if (cItems[j].checked) {
							basketIds.push(cItems[j].basketId)
						}
					}
				}
				if (!basketIds.length) {
					uni.showToast({
						title: '请选择商品',
						icon: 'none'
					})
				} else {
					uni.showModal({
						title: '',
						content: '确认要删除选中的商品吗？',
						confirmColor: '#eb2444',
						success(res) {
							if (res.confirm) {
								uni.showLoading({
									mask: true
								})
								http.request({
										url: '/p/shopCart/deleteItem',
										method: 'DELETE',
										data: basketIds
									})
									.then(() => {
										uni.hideLoading()
										loadBasketData()
									})
							}
						}

					})
				}
			},
		}
	}
</script>
<style lang="scss">
	.container {
		width: 100%;
		background: #f4f4f4;
		min-height: calc(100vh - 118rpx);
	}

	.prod-list {
		padding-bottom: 118rpx;
		width: 100%;

		.prod-block {
			background: #fff;
			margin-top: 15rpx;

			.discount-tips {
				padding: 20rpx 0 20rpx 20rpx;
				border-bottom: 2rpx solid #f4f4f4;
				height: 40rpx;
				line-height: 40rpx;

				.text-block {
					padding: 3rpx 5rpx;
					border-radius: 8rpx;
					font-size: 22rpx;
					color: #eb2444;
					border: 2rpx solid #eb2444;
				}

				.text-list {
					font-size: 24rpx;
					margin-left: 10rpx;
				}
			}
		}

		.item {
			background: #fff;
			display: flex;
			align-items: center;
			padding: 20rpx;

			.prodinfo {
				position: relative;
				color: #999;
				width: 100%;

				&::after {
					content: '';
					background-color: #f4f4f4;
					left: 0;
					height: 1px;
					transform-origin: 50% 100% 0;
					bottom: -20rpx;
					position: absolute;
					display: block;
					width: 642rpx;
					padding-left: 20rpx;
				}

				.pic {
					text-align: center;
					width: 180rpx;
					height: 180rpx;
					line-height: 180rpx;
					font-size: 0;
				}
			}

			&:last-child {
				.prodinfo {
					&::after {
						height: 0;
					}
				}
			}

			.staus {
				text-align: center;
				background: rgb(196, 192, 192);
				font-size: 20rpx;
				width: 50rpx;
				color: #fff;
			}

			.opt {
				font-size: 28rpx;
				margin-left: 20rpx;
				width: 100%;
			}

			.pic {
				image {
					max-width: 100%;
					max-height: 100%;
					vertical-align: middle;
				}
			}
		}

		.lose-efficacy {
			.discount-tips {
				padding: 20rpx 0;
				border-bottom: 2rpx solid #ddd;
				height: 50rpx;
				line-height: 50rpx;
				margin-left: 20rpx;

				.text-list {
					font-size: 30rpx;
					margin-left: 10rpx;
				}
			}
		}
	}

	.prodinfo {
		display: flex;
		margin-left: 20rpx;

		.opt {
			.prod-name {
				color: #333;
				max-height: 72rpx;
				line-height: 36rpx;
				display: -webkit-box;
				word-break: break-all;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.prod-info-text {
				color: #999;
				display: inline-block;
				-webkit-line-clamp: 1;
				height: 48rpx;
				line-height: 48rpx;
				background: #f9f9f9;
				padding: 0 10rpx 0 10rpx;
				border-radius: 4rpx;
				margin: 10rpx 0 0rpx 0;
				overflow: hidden;
				font-size: 24rpx;
				position: relative;
				font-family: arial;
			}

			.prod-info-text.empty-n {
				padding: 0;
			}

			.price-count {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.price {
					color: #eb2444;
				}
			}
		}
	}

	.prod-info-text {
		&:before {
			border-top: 5px solid #aaa;
		}

		&:after {
			border-top: 5px solid #f9f9f9;
			top: 9px;
		}
	}

	.lose-efficacy {
		.prodinfo {
			.opt {
				.price-count {
					.price {
						color: #999;
					}
				}
			}
		}

		margin-top: 20rpx;
		background: #fff;

		.item {
			background: #f8f8f9;
		}

		.discount-tips {
			.empty-prod {
				color: #777;
				font-size: 26rpx;
				border: 2rpx solid #999;
				padding: 0 10rpx;
				border-radius: 8rpx;
				float: right;
				margin-right: 20rpx;
			}
		}
	}

	.m-numSelector {
		.minus {
			float: left;
			box-sizing: border-box;
			height: 56rpx;
			border: 2rpx solid #d9d9d9;
			position: relative;
			width: 56rpx;
			border-right: 0;
			border-top-left-radius: 4rpx;
			border-bottom-left-radius: 4rpx;

			&::before {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				content: ' ';
				width: 22rpx;
				height: 3rpx;
				background-color: #7f7f7f;
			}
		}

		input {
			float: left;
			box-sizing: border-box;
			height: 56rpx;
			border: 2rpx solid #d9d9d9;
			width: 56rpx;
			text-align: center;
			color: #333;
		}

		.plus {
			float: left;
			box-sizing: border-box;
			height: 56rpx;
			border: 2rpx solid #d9d9d9;
			position: relative;
			width: 56rpx;
			border-left: 0;
			border-top-right-radius: 4rpx;
			border-bottom-right-radius: 4rpx;

			&::before {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				content: ' ';
				width: 22rpx;
				height: 3rpx;
				background-color: #7f7f7f;
			}

			&::after {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				content: ' ';
				width: 22rpx;
				height: 3rpx;
				background-color: #7f7f7f;
				transform: rotate(90deg);
			}
		}

		float: right;

		&:not(.disabled) {
			.minus {
				&:not(.disabled) {
					&:active {
						background-color: #f4f4f4;
					}
				}
			}

			.plus {
				&:not(.disabled) {
					&:active {
						background-color: #f4f4f4;
					}
				}
			}
		}
	}

	:deep(checkbox) {

		.uni-checkbox-input,
		.wx-checkbox-input {
			border-radius: 50%;
			width: 35rpx;
			height: 35rpx;
		}

		.wx-checkbox-input.wx-checkbox-input-checked {
			background: #eb2444;
			border-color: #eb2444;

			&::before {
				text-align: center;
				font-size: 22rpx;
				color: #fff;
				background: transparent;
				transform: translate(-50%, -50%) scale(1);
				-webkit-transform: translate(-50%, -50%) scale(1);
			}
		}
	}

	.empty {
		font-size: 26rpx;
		color: #aaa;
		padding-top: 200rpx;

		.txt {
			text-align: center;
			margin-top: 30rpx;
		}

		.img {
			margin-top: 80rpx;
			text-align: center;

			image {
				width: 80rpx;
				height: 80rpx;
			}
		}
	}

	.price-count {
		.disable-price {
			color: #999;
		}
	}

	/*底部*/

	.cart-footer {
		position: fixed;
		bottom: calc(90rpx + env(safe-area-inset-bottom));
		left: 0;
		width: 100%;
		display: flex;
		flex-direction: row nowrap;
		height: 98rpx;
		border-top: 2rpx solid #f4f4f4;
		z-index: 999;

		.btn {
			position: relative;
			display: flex;
			flex-grow: 1;
			justify-content: center;
			align-items: center;
			width: 0;
			background-color: #fafafa;
			background: rgba(255, 255, 255, 0.95);
			font-size: 28rpx;

			.total-msg {
				font-size: 20rpx;
			}
		}

		.btn.total {
			display: flex;
			flex-flow: column;
			align-items: flex-start;
			width: 300rpx;

			.price {
				color: #eb2444;
				font-size: 30rpx;
			}
		}

		.btn.del {
			color: #eb2444;
			width: 70rpx;
			font-size: 22rpx;
			text-align: left;
			display: block;
			line-height: 102rpx;
		}

		.btn.all {
			width: 150rpx;
			font-size: 26rpx;

			label {
				display: flex;
				flex-grow: 1;
				justify-content: center;
				align-items: center;
			}
		}

		.btn.settle {
			width: 200rpx;
			background: #eb2444;
			color: #fff;
		}
	}
</style>